
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="../03_Javascript%E5%9F%BA%E7%A1%80/index.html">
      
      
        <link rel="next" href="../03_jQuery/index.html">
      
      <link rel="icon" href="../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.1.3">
    
    
      
        <title>03 Javascript高级实验 - 基于WEB的应用程序开发-实验指导书</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/main.c4a75a56.min.css">
      
        
        <link rel="stylesheet" href="../assets/stylesheets/palette.a0c5b2b5.min.css">
      
      

    
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
    
    <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  </head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="">
  
    
    
      <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#javascript" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href=".." title="基于WEB的应用程序开发-实验指导书" class="md-header__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            基于WEB的应用程序开发-实验指导书
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              03 Javascript高级实验
            
          </span>
        </div>
      </div>
    </div>
    
      <form class="md-header__option" data-md-component="palette">
        
          
          <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent=""  aria-label="夜间模式"  type="radio" name="__palette" id="__palette_1">
          
            <label class="md-header__button md-icon" title="夜间模式" for="__palette_2" hidden>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
            </label>
          
        
          
          <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent=""  aria-label="日间模式"  type="radio" name="__palette" id="__palette_2">
          
            <label class="md-header__button md-icon" title="日间模式" for="__palette_1" hidden>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
            </label>
          
        
      </form>
    
    
    
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href=".." title="基于WEB的应用程序开发-实验指导书" class="md-nav__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>

    </a>
    基于WEB的应用程序开发-实验指导书
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_Javascript%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        03 Javascript基础
      </a>
    </li>
  

    
      
      
      

  
  
    
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          03 Javascript高级实验
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="index.html" class="md-nav__link md-nav__link--active">
        03 Javascript高级实验
      </a>
      
        

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    1 实验类型
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    2 实验目的
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    3 实验要求
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    4 实验环境
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    5 实验步骤
  </a>
  
    <nav class="md-nav" aria-label="5 实验步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    正则表达式
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#html5-canvas" class="md-nav__link">
    Html5 Canvas
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_jQuery/index.html" class="md-nav__link">
        03 jQuery
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_Bootstrap/index.html" class="md-nav__link">
        03 Bootstrap
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_Vue.js%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        03 Vue.js
      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    1 实验类型
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    2 实验目的
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    3 实验要求
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    4 实验环境
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    5 实验步骤
  </a>
  
    <nav class="md-nav" aria-label="5 实验步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    正则表达式
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#html5-canvas" class="md-nav__link">
    Html5 Canvas
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  


<h1 id="javascript">Javascript高级实验</h1>
<h2 id="1">1 实验类型</h2>
<p>验证型，2学时，必选实验</p>
<h2 id="2">2 实验目的</h2>
<p>熟悉正则表达式书写规则；了解Html 5中Canvas对象基础使用</p>
<h2 id="3">3 实验要求</h2>
<p>调试实验案例，分析运行结果</p>
<h2 id="4">4 实验环境</h2>
<p><code>Microsoft Edge/Chrome/Firefox</code>等浏览器，<code>Visual Studio Code</code>或<code>记事本</code></p>
<h2 id="5">5 实验步骤</h2>
<blockquote>
<p>工作目录：<code>C:/${学号}</code>， 后续文件均存放在工作目录</p>
</blockquote>
<h3 id="_1">正则表达式</h3>
<p><strong>补充1：正则表达式修饰符</strong></p>
<p><code>修饰符</code>可以在全局搜索中不区分大小写:</p>
<table>
<thead>
<tr>
<th>修饰符</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>i</td>
<td>执行对大小写不敏感的匹配。</td>
</tr>
<tr>
<td>g</td>
<td>执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。</td>
</tr>
<tr>
<td>m</td>
<td>执行多行匹配。</td>
</tr>
</tbody>
</table>
<p><strong>补充2：String对象的replace方法</strong></p>
<p><strong><em>语法</em></strong></p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="nx">string</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">searchvalue</span><span class="p">,</span><span class="nx">newvalue</span><span class="p">)</span>
</code></pre></div>
<p><strong><em>参数值</em></strong></p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>searchvalue</td>
<td>必须。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。</td>
</tr>
<tr>
<td>newvalue</td>
<td>必需。一个字符串值。规定了替换文本或生成替换文本的函数。</td>
</tr>
</tbody>
</table>
<p><strong><em>返回值</em></strong></p>
<table>
<thead>
<tr>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>String</td>
<td>一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。</td>
</tr>
</tbody>
</table>
<ol>
<li>
<p>将字符串中的<code>Xust</code>替换为<code>Xidian</code></p>
<p><!--<iframe src="./src/js_regular.html" frameborder="0" width="100%" height="100"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_regular.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span>
<span class="normal"><a href="#__codelineno-1-3">3</a></span>
<span class="normal"><a href="#__codelineno-1-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="w">  </span><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Visit Xust!&quot;</span><span class="p">;</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/Xust/</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;Xidian&quot;</span><span class="p">));</span>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>全局替换<code>Xust</code>为<code>Xidian</code></p>
<p><!--<iframe src="./src/js_regular_global.html" frameborder="0" width="100%" height="100"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_regular_global.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span>
<span class="normal"><a href="#__codelineno-2-3">3</a></span>
<span class="normal"><a href="#__codelineno-2-4">4</a></span>
<span class="normal"><a href="#__codelineno-2-5">5</a></span>
<span class="normal"><a href="#__codelineno-2-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="w">  </span><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Welcome to Xust! &quot;</span><span class="p">;</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a><span class="w">  </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;We are proud to announce that Xust has &quot;</span><span class="p">;</span>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="w">  </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">&quot;one of the largest Web Developers sites in the world.&quot;</span><span class="p">;</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/Xust/g</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;Xidian&quot;</span><span class="p">));</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>确保字符串中的<code>Javascript</code>首字母大写</p>
<p><!--<iframe src="./src/js_regular_i.html" frameborder="0" width="100%" height="100"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_regular_i.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">1</a></span>
<span class="normal"><a href="#__codelineno-3-2">2</a></span>
<span class="normal"><a href="#__codelineno-3-3">3</a></span>
<span class="normal"><a href="#__codelineno-3-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="w">  </span><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;javascript Tutorial&quot;</span><span class="p">;</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/javascript/i</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;JavaScript&quot;</span><span class="p">));</span>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>将字符串<code>Doe, John</code>转换为<code>John Doe</code>的形式</p>
<p><iframe src="./src/js_regular_exchange.html" frameborder="0" width="100%" height="100"></iframe>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_regular_exchange.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1">1</a></span>
<span class="normal"><a href="#__codelineno-4-2">2</a></span>
<span class="normal"><a href="#__codelineno-4-3">3</a></span>
<span class="normal"><a href="#__codelineno-4-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="w">  </span><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;Doe, John&quot;</span><span class="p">;</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(\w+)\s*, \s*(\w+)/</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;$2 $1&quot;</span><span class="p">));</span>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>把所有的<code>花引号</code>替换为<code>直引号</code></p>
<p><!--<iframe src="./src/js_regular_quote.html" frameborder="0" width="100%" height="100"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_regular_quote.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1">1</a></span>
<span class="normal"><a href="#__codelineno-5-2">2</a></span>
<span class="normal"><a href="#__codelineno-5-3">3</a></span>
<span class="normal"><a href="#__codelineno-5-4">4</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-2" name="__codelineno-5-2"></a><span class="w">  </span><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;&quot;a&quot;, &quot;b&quot;&#39;</span><span class="p">;</span>
<a id="__codelineno-5-3" name="__codelineno-5-3"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/&quot;([^&quot;]*)&quot;/g</span><span class="p">,</span><span class="w"> </span><span class="s2">&quot;&#39;$1&#39;&quot;</span><span class="p">));</span>
<a id="__codelineno-5-4" name="__codelineno-5-4"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>把字符串中所有单词的<code>首字母</code>都转换为<code>大写</code></p>
<p><!--<iframe src="./src/js_regular_cap_first.html" frameborder="0" width="100%" height="100"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_regular_cap_first.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1">1</a></span>
<span class="normal"><a href="#__codelineno-6-2">2</a></span>
<span class="normal"><a href="#__codelineno-6-3">3</a></span>
<span class="normal"><a href="#__codelineno-6-4">4</a></span>
<span class="normal"><a href="#__codelineno-6-5">5</a></span>
<span class="normal"><a href="#__codelineno-6-6">6</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a><span class="w">  </span><span class="kd">var</span><span class="w"> </span><span class="nx">str</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;aaa bbb ccc&#39;</span><span class="p">;</span>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a><span class="w">  </span><span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\b\w+\b/g</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">word</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a><span class="w">    </span><span class="k">return</span><span class="w"> </span><span class="nx">word</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">).</span><span class="nx">toUpperCase</span><span class="p">()</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">word</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
<a id="__codelineno-6-5" name="__codelineno-6-5"></a><span class="w">  </span><span class="p">}));</span>
<a id="__codelineno-6-6" name="__codelineno-6-6"></a><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>编写代码验证<code>常见正则表达式</code></p>
</li>
</ol>
<p>选择某类常见字符串，编写代码进行验证</p>
<p><strong>校验数字的表达式</strong></p>
<table>
<thead>
<tr>
<th>功能</th>
<th>正则表达式</th>
</tr>
</thead>
<tbody>
<tr>
<td>数字</td>
<td>^[0-9]*$</td>
</tr>
<tr>
<td>n位的数字</td>
<td>^\d{n}$</td>
</tr>
<tr>
<td>至少n位的数字</td>
<td>^\d{n,}$</td>
</tr>
<tr>
<td>m-n位的数字</td>
<td>^\d{m,n}$</td>
</tr>
<tr>
<td>零和非零开头的数字</td>
<td>^(0&#124;[1-9][0-9]*)$</td>
</tr>
<tr>
<td>非零开头的最多带两位小数的数字</td>
<td>^([1-9][0-9]*)+(.[0-9]{1,2})?$</td>
</tr>
<tr>
<td>带1-2位小数的正数或负数</td>
<td>^(-)?\d+(.\d{1,2})?$</td>
</tr>
<tr>
<td>正数、负数、和小数</td>
<td>^(-&#124;+)?\d+(.\d+)?$</td>
</tr>
<tr>
<td>有两位小数的正实数</td>
<td>^[0-9]+(.[0-9]{2})?$</td>
</tr>
<tr>
<td>有1~3位小数的正实数</td>
<td>^[0-9]+(.[0-9]{1,3})?$</td>
</tr>
<tr>
<td>非零的正整数</td>
<td>^[1-9]\d<em>$ 或 ^([1-9][0-9]</em>){1,3}$ 或 ^+?[1-9][0-9]*$</td>
</tr>
<tr>
<td>非零的负整数</td>
<td>^-[1-9][]0-9"<em>$ 或 ^-[1-9]\d</em>$</td>
</tr>
<tr>
<td>非负整数</td>
<td>^\d+$ 或 ^[1-9]\d*&#124;0$</td>
</tr>
<tr>
<td>非正整数</td>
<td>^-[1-9]\d*&#124;0$ 或 ^((-\d+)&#124;(0+))$</td>
</tr>
<tr>
<td>非负浮点数</td>
<td>^\d+(.\d+)?$ 或 ^[1-9]\d<em>.\d</em>&#124;0.\d<em>[1-9]\d</em>&#124;0?.0+&#124;0$</td>
</tr>
<tr>
<td>非正浮点数</td>
<td>^((-\d+(.\d+)?)&#124;(0+(.0+)?))$ 或 ^(-([1-9]\d<em>.\d</em>&#124;0.\d<em>[1-9]\d</em>))&#124;0?.0+&#124;0$</td>
</tr>
<tr>
<td>正浮点数</td>
<td>^[1-9]\d<em>.\d</em>&#124;0.\d<em>[1-9]\d</em>$ 或 ^(([0-9]+.[0-9]<em>[1-9][0-9]</em>)&#124;([0-9]<em>[1-9][0-9]</em>.[0-9]+)&#124;([0-9]<em>[1-9][0-9]</em>))$</td>
</tr>
<tr>
<td>负浮点数</td>
<td>^-([1-9]\d<em>.\d</em>&#124;0.\d<em>[1-9]\d</em>)$ 或 ^(-(([0-9]+.[0-9]<em>[1-9][0-9]</em>)&#124;([0-9]<em>[1-9][0-9]</em>.[0-9]+)&#124;&#124;([0-9]<em>[1-9][0-9]</em>)))$</td>
</tr>
<tr>
<td>浮点数</td>
<td>^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d<em>.\d</em>&#124;0.\d<em>[1-9]\d</em>&#124;0?.0+&#124;0)$</td>
</tr>
</tbody>
</table>
<p><strong>校验字符的表达式</strong></p>
<table>
<thead>
<tr>
<th>功能</th>
<th>正则表达式</th>
</tr>
</thead>
<tbody>
<tr>
<td>汉字</td>
<td>^[\u4e00-\u9fa5]{0,}$</td>
</tr>
<tr>
<td>英文和数字</td>
<td>^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$</td>
</tr>
<tr>
<td>长度为3-20的所有字符</td>
<td>^.{3,20}$</td>
</tr>
<tr>
<td>由26个英文字母组成的字符串</td>
<td>^[A-Za-z]+$</td>
</tr>
<tr>
<td>由26个大写英文字母组成的字符串</td>
<td>^[A-Z]+$</td>
</tr>
<tr>
<td>由26个小写英文字母组成的字符串</td>
<td>^[a-z]+$</td>
</tr>
<tr>
<td>由数字和26个英文字母组成的字符串</td>
<td>^[A-Za-z0-9]+$</td>
</tr>
<tr>
<td>由数字、26个英文字母或者下划线组成的字符串</td>
<td>^\w+$ 或 ^\w{3,20}$</td>
</tr>
<tr>
<td>中文、英文、数字包括下划线</td>
<td>^[\u4E00-\u9FA5A-Za-z0-9_]+$</td>
</tr>
<tr>
<td>中文、英文、数字但不包括下划线等符号</td>
<td>^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$</td>
</tr>
<tr>
<td>可以输入含有^%&amp;',;=?$\"等字符</td>
<td>[^%&amp;',;=?$\x22]+ 12</td>
</tr>
<tr>
<td>禁止输入含有~的字符</td>
<td>[^~\x22]+</td>
</tr>
</tbody>
</table>
<p><strong>特殊需求表达式</strong> </p>
<table>
<thead>
<tr>
<th>功能</th>
<th>正则表达式</th>
</tr>
</thead>
<tbody>
<tr>
<td>Email地址</td>
<td>^\w+([-+.]\w+)<em>@\w+([-.]\w+)</em>.\w+([-.]\w+)*$</td>
</tr>
<tr>
<td>域名</td>
<td>[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?</td>
</tr>
<tr>
<td>InternetURL</td>
<td>[a-zA-z]+://[^\s]<em> 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&amp;=]</em>)?$</td>
</tr>
<tr>
<td>手机号码</td>
<td>^(13[0-9]&#124;14[5&#124;7]&#124;15[0&#124;1&#124;2&#124;3&#124;5&#124;6&#124;7&#124;8&#124;9]&#124;18[0&#124;1&#124;2&#124;3&#124;5&#124;6&#124;7&#124;8&#124;9])\d{8}$</td>
</tr>
<tr>
<td>电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)</td>
<td>^((\d{3,4}-)&#124;\d{3.4}-)?\d{7,8}$</td>
</tr>
<tr>
<td>国内电话号码(0511-4405222、021-87888822)</td>
<td>\d{3}-\d{8}&#124;\d{4}-\d{7}</td>
</tr>
<tr>
<td>身份证号(15位、18位数字)</td>
<td>^\d{15}&#124;\d{18}$</td>
</tr>
<tr>
<td>短身份证号码(数字、字母x结尾)</td>
<td>^([0-9]){7,18}(x&#124;X)?$ 或 ^\d{8,18}&#124;[0-9x]{8,18}&#124;[0-9X]{8,18}?$</td>
</tr>
<tr>
<td>帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)</td>
<td>^[a-zA-Z][a-zA-Z0-9_]{4,15}$</td>
</tr>
<tr>
<td>密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)</td>
<td>^[a-zA-Z]\w{5,17}$</td>
</tr>
<tr>
<td>强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)</td>
<td>^(?=.<em>\d)(?=.</em>[a-z])(?=.*[A-Z]).{8,10}$</td>
</tr>
<tr>
<td>日期格式</td>
<td>^\d{4}-\d{1,2}-\d{1,2}</td>
</tr>
<tr>
<td>一年的12个月(01～09和1～12)</td>
<td>^(0?[1-9]&#124;1[0-2])$</td>
</tr>
<tr>
<td>一个月的31天(01～09和1～31)</td>
<td>^((0?[1-9])&#124;((1&#124;2)[0-9])&#124;30&#124;31)$</td>
</tr>
<tr>
<td>xml文件</td>
<td>^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x&#124;X][m&#124;M][l&#124;L]$</td>
</tr>
<tr>
<td>中文字符的正则表达式</td>
<td>[\u4e00-\u9fa5]</td>
</tr>
<tr>
<td>双字节字符</td>
<td>[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))</td>
</tr>
<tr>
<td>空白行的正则表达式</td>
<td>\n\s*\r (可以用来删除空白行)</td>
</tr>
<tr>
<td>HTML标记的正则表达式</td>
<td>&lt;(\S<em>?)[^&gt;]</em>&gt;.<em>?<!--\1-->&#124;&lt;.</em>? /&gt; (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)</td>
</tr>
<tr>
<td>首尾空白字符的正则表达式</td>
<td>^\s<em>&#124;\s</em>$或(^\s<em>)&#124;(\s</em>$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)&#124;，非常有用的表达式)</td>
</tr>
<tr>
<td>腾讯QQ号</td>
<td>[1-9][0-9]{4,} (腾讯QQ号从10000开始)</td>
</tr>
<tr>
<td>中国邮政编码</td>
<td>[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)</td>
</tr>
<tr>
<td>IP地址</td>
<td>\d+.\d+.\d+.\d+ (提取IP地址时有用)</td>
</tr>
<tr>
<td>IP地址</td>
<td>((?:(?:25[0-5]&#124;2[0-4]\d&#124;[01]?\d?\d)\.){3}(?:25[0-5]&#124;2[0-4]\d&#124;[01]?\d?\d))</td>
</tr>
<tr>
<td>IP-v4地址</td>
<td>\b(?:(?:25[0-5]&#124;2[0-4][0-9]&#124;[01]?[0-9][0-9]?)\.){3}(?:25[0-5]&#124;2[0-4][0-9]&#124;[01]?[0-9][0-9]?)\b (提取IP地址时有用)</td>
</tr>
<tr>
<td>子网掩码</td>
<td>((?:(?:25[0-5]&#124;2[0-4]\d&#124;[01]?\d?\d)\.){3}(?:25[0-5]&#124;2[0-4]\d&#124;[01]?\d?\d))</td>
</tr>
<tr>
<td>抽取注释</td>
<td><!--(.*?)--></td>
</tr>
<tr>
<td>查找CSS属性:</td>
<td>^\s<em>[a-zA-Z\-]+\s</em>[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}</td>
</tr>
<tr>
<td>提取页面超链接:</td>
<td>(<a\\s*(?!.*\\brel=)[^>]<em>)(href="https?:\/\/)((?!(?:(?:www\.)?'.implode('&#124;(?:www\.)?', $follow_list).'))[^" rel="external nofollow" ]+)"((?!.</em>\brel=)[^&gt;]<em>)(?:[^&gt;]</em>)&gt;</td>
</tr>
<tr>
<td>提取网页图片</td>
<td>\&lt; <em>[img][^\\&gt;]</em>[src] <em>= </em>[\"\']{0,1}([^\"\'\ &gt;]*)</td>
</tr>
<tr>
<td>提取网页颜色代码</td>
<td>^#([A-Fa-f0-9]{6}&#124;[A-Fa-f0-9]{3})$</td>
</tr>
<tr>
<td>文件扩展名效验</td>
<td>^([a-zA-Z]\:&#124;\\)\\([^\\]+\\)<em>[^\/:</em>?"&lt;&gt;&#124;]+\.txt(l)?$</td>
</tr>
<tr>
<td>判断IE版本</td>
<td>^.<em>MSIE <a href="?:\.[0-9]+">5-8</a>?(?!.</em>Trident\/[5-9]\.0).*$</td>
</tr>
</tbody>
</table>
<h3 id="html5-canvas">Html5 Canvas</h3>
<ol>
<li>
<p>绘制一条路径，形状是字母L，参考代码如下：</p>
<p><iframe src="./src/js_canvas_line.html" frameborder="0" width="100%" height="200"></iframe>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_canvas_line.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-7-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-7-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-7-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-7-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-7-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-7-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-7-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-7-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-7-10">10</a></span>
<span class="normal"><a href="#__codelineno-7-11">11</a></span>
<span class="normal"><a href="#__codelineno-7-12">12</a></span>
<span class="normal"><a href="#__codelineno-7-13">13</a></span>
<span class="normal"><a href="#__codelineno-7-14">14</a></span>
<span class="normal"><a href="#__codelineno-7-15">15</a></span>
<span class="normal"><a href="#__codelineno-7-16">16</a></span>
<span class="normal"><a href="#__codelineno-7-17">17</a></span>
<span class="normal"><a href="#__codelineno-7-18">18</a></span>
<span class="normal"><a href="#__codelineno-7-19">19</a></span>
<span class="normal"><a href="#__codelineno-7-20">20</a></span>
<span class="normal"><a href="#__codelineno-7-21">21</a></span>
<span class="normal"><a href="#__codelineno-7-22">22</a></span>
<span class="normal"><a href="#__codelineno-7-23">23</a></span>
<span class="normal"><a href="#__codelineno-7-24">24</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a>
<a id="__codelineno-7-4" name="__codelineno-7-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-5" name="__codelineno-7-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-6" name="__codelineno-7-6"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>lineTo<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-7-7" name="__codelineno-7-7"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-8" name="__codelineno-7-8"></a>
<a id="__codelineno-7-9" name="__codelineno-7-9"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-10" name="__codelineno-7-10"></a>  <span class="p">&lt;</span><span class="nt">canvas</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;myCanvas&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;300&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;150&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;border:1px solid #d3d3d3;&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-11" name="__codelineno-7-11"></a>    您的浏览器不支持 HTML5 canvas 标签。
<a id="__codelineno-7-12" name="__codelineno-7-12"></a>  <span class="p">&lt;/</span><span class="nt">canvas</span><span class="p">&gt;</span>
<a id="__codelineno-7-13" name="__codelineno-7-13"></a>  <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-7-14" name="__codelineno-7-14"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">c</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;myCanvas&quot;</span><span class="p">);</span>
<a id="__codelineno-7-15" name="__codelineno-7-15"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">c</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">&quot;2d&quot;</span><span class="p">);</span>
<a id="__codelineno-7-16" name="__codelineno-7-16"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">beginPath</span><span class="p">();</span>
<a id="__codelineno-7-17" name="__codelineno-7-17"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">moveTo</span><span class="p">(</span><span class="mf">20</span><span class="p">,</span><span class="w"> </span><span class="mf">20</span><span class="p">);</span>
<a id="__codelineno-7-18" name="__codelineno-7-18"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="mf">20</span><span class="p">,</span><span class="w"> </span><span class="mf">100</span><span class="p">);</span>
<a id="__codelineno-7-19" name="__codelineno-7-19"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">lineTo</span><span class="p">(</span><span class="mf">70</span><span class="p">,</span><span class="w"> </span><span class="mf">100</span><span class="p">);</span>
<a id="__codelineno-7-20" name="__codelineno-7-20"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">stroke</span><span class="p">();</span>
<a id="__codelineno-7-21" name="__codelineno-7-21"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-7-22" name="__codelineno-7-22"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-23" name="__codelineno-7-23"></a>
<a id="__codelineno-7-24" name="__codelineno-7-24"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
<li>
<p>实现图形旋转，参考代码如下:</p>
<p><iframe src="./src/js_canvas_transform.html" frameborder="0" width="100%" height="200"></iframe>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">js_canvas_transform.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-8-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-8-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-8-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-8-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-8-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-8-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-8-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-8-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-8-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-8-10">10</a></span>
<span class="normal"><a href="#__codelineno-8-11">11</a></span>
<span class="normal"><a href="#__codelineno-8-12">12</a></span>
<span class="normal"><a href="#__codelineno-8-13">13</a></span>
<span class="normal"><a href="#__codelineno-8-14">14</a></span>
<span class="normal"><a href="#__codelineno-8-15">15</a></span>
<span class="normal"><a href="#__codelineno-8-16">16</a></span>
<span class="normal"><a href="#__codelineno-8-17">17</a></span>
<span class="normal"><a href="#__codelineno-8-18">18</a></span>
<span class="normal"><a href="#__codelineno-8-19">19</a></span>
<span class="normal"><a href="#__codelineno-8-20">20</a></span>
<span class="normal"><a href="#__codelineno-8-21">21</a></span>
<span class="normal"><a href="#__codelineno-8-22">22</a></span>
<span class="normal"><a href="#__codelineno-8-23">23</a></span>
<span class="normal"><a href="#__codelineno-8-24">24</a></span>
<span class="normal"><a href="#__codelineno-8-25">25</a></span>
<span class="normal"><a href="#__codelineno-8-26">26</a></span>
<span class="normal"><a href="#__codelineno-8-27">27</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-8-2" name="__codelineno-8-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-8-3" name="__codelineno-8-3"></a>
<a id="__codelineno-8-4" name="__codelineno-8-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-8-5" name="__codelineno-8-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-6" name="__codelineno-8-6"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>setTransform<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-8-7" name="__codelineno-8-7"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-8-8" name="__codelineno-8-8"></a>
<a id="__codelineno-8-9" name="__codelineno-8-9"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-8-10" name="__codelineno-8-10"></a>  <span class="p">&lt;</span><span class="nt">canvas</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;myCanvas&quot;</span> <span class="na">width</span><span class="o">=</span><span class="s">&quot;300&quot;</span> <span class="na">height</span><span class="o">=</span><span class="s">&quot;150&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;border:1px solid #d3d3d3;&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-8-11" name="__codelineno-8-11"></a>    您的浏览器不支持 HTML5 canvas 标签。
<a id="__codelineno-8-12" name="__codelineno-8-12"></a>  <span class="p">&lt;/</span><span class="nt">canvas</span><span class="p">&gt;</span>
<a id="__codelineno-8-13" name="__codelineno-8-13"></a>  <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-8-14" name="__codelineno-8-14"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">c</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;myCanvas&quot;</span><span class="p">);</span>
<a id="__codelineno-8-15" name="__codelineno-8-15"></a><span class="w">    </span><span class="kd">var</span><span class="w"> </span><span class="nx">ctx</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">c</span><span class="p">.</span><span class="nx">getContext</span><span class="p">(</span><span class="s2">&quot;2d&quot;</span><span class="p">);</span>
<a id="__codelineno-8-16" name="__codelineno-8-16"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;yellow&quot;</span><span class="p">;</span>
<a id="__codelineno-8-17" name="__codelineno-8-17"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">250</span><span class="p">,</span><span class="w"> </span><span class="mf">100</span><span class="p">)</span>
<a id="__codelineno-8-18" name="__codelineno-8-18"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">setTransform</span><span class="p">(</span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">30</span><span class="p">,</span><span class="w"> </span><span class="mf">10</span><span class="p">);</span>
<a id="__codelineno-8-19" name="__codelineno-8-19"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;red&quot;</span><span class="p">;</span>
<a id="__codelineno-8-20" name="__codelineno-8-20"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">250</span><span class="p">,</span><span class="w"> </span><span class="mf">100</span><span class="p">);</span>
<a id="__codelineno-8-21" name="__codelineno-8-21"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">setTransform</span><span class="p">(</span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="o">-</span><span class="mf">0.5</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">30</span><span class="p">,</span><span class="w"> </span><span class="mf">10</span><span class="p">);</span>
<a id="__codelineno-8-22" name="__codelineno-8-22"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillStyle</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">&quot;blue&quot;</span><span class="p">;</span>
<a id="__codelineno-8-23" name="__codelineno-8-23"></a><span class="w">    </span><span class="nx">ctx</span><span class="p">.</span><span class="nx">fillRect</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="mf">250</span><span class="p">,</span><span class="w"> </span><span class="mf">100</span><span class="p">);</span>
<a id="__codelineno-8-24" name="__codelineno-8-24"></a><span class="w">  </span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-8-25" name="__codelineno-8-25"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-8-26" name="__codelineno-8-26"></a>
<a id="__codelineno-8-27" name="__codelineno-8-27"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div></p>
</li>
</ol>





                
              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": "..", "features": ["content.tabs.link", "navigation.expand", "navigation.sections", "navigation.path"], "search": "../assets/javascripts/workers/search.208ed371.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../assets/javascripts/bundle.efa0ade1.min.js"></script>
      
    
  </body>
</html>